<template>
    <div class="detail">
        <van-nav-bar
                title="详情"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
    <van-card
        :title="business.name"
        :desc="`月销售${business.monthSales}+份`"
        :thumb="business.mainImage"
    />
        <van-tabbar v-model="active" route>
            <van-tabbar-item :class="{'van-tabbar-item--active':active == 0}"
                             :to=" `/business/detail/foods?id=${$route.query.id}`" icon="home-o">点菜
            </van-tabbar-item>
            <van-tabbar-item :class="{'van-tabbar-item--active':active == 1}"
                             :to=" `/business/detail/info?fid=${$route.query.id}`" icon="search">商家
            </van-tabbar-item>
        </van-tabbar>
        <router-view v-slot="{Component}"  :business="business">
<!-- 利用插槽缓存组件 keep-alive有两个属性 ：exclude（排除某些选项）和include（包含某些选项） 逗号分隔-->
        <keep-alive>
          <component :is="Component"/>
        </keep-alive>
        </router-view>
    </div>
</template>

<script>


export default {
    name: "detail",
    data(){
        return{
            active:'',
            id:'',
            business:{}
        }
    },
    methods:{
        _intBusiness(){
            this.$axios.get(`/ele_server/business/getById?id=${this.id}`).then(
               ({data:res}) => {
                   if(res.status == 0){
                       this.business = res.data
                   }else{
                   alert(res.message)
                   }
           })
        },
        onClickLeft(){
            this.$router.back()
        },
    },
    created() {
        this.id=this.$route.query.id;
        this._intBusiness()
    }
}
</script>

<style scoped lang="stylus">
.van-tabbar--fixed
    position relative
</style>
